<template>

<div>


    <!-- v-show 切换评率高的 通过 display:none来实现的 -->
    <h1 v-show="code.toLocaleLowerCase() === 'vue'" >掌握JS</h1>

    <!-- 条件渲染 v-if 适用于切换频率较低场景 因为不展示的DOM 直接移除 -->
    <h1 v-if="code.toLocaleLowerCase() === 'vue' ">来到 VUE </h1>
    <h1 v-else-if="code.toLocaleLowerCase() === 'java' ">你好:JAVA</h1>
    <h1 v-else>你好:C++</h1>
    <button @click="changeCode">随机</button>

    <template v-if="true">
        <h1> {{ `template 不会影响HTML结构 但是只能配合 v-if `.toLocaleUpperCase()  }}   </h1>
    </template>

   


</div>

</template>

<script>
export default {

    name: 'HelloCondition',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            code: 'Java'
        }
    },
    methods: {

        changeCode(){
            const arr = ['Java', 'VUE', 'Python'];
            this.code = arr[Math.floor(Math.random() * arr.length)];
        }

    }

}
</script>

<style></style>